<template>
    <div class="menu_header">
        <div class="title">
            <h2>熊熊乐园电商运营平台</h2>
        </div>
        <div class="icon" @click="isCollapse = !isCollapse">
            <el-icon>
                <Menu />
            </el-icon>
        </div>
        <div class="right">
            <div class="select">
                <el-dropdown @command="commandHandle">
                    <span class="el-dropdown-link">
                        {{ userStore.username }}
                        <el-icon class="el-icon--right">
                            <arrow-down />
                        </el-icon>
                    </span>
                    <template #dropdown>
                        <el-dropdown-menu>
                            <el-dropdown-item command="index">首页</el-dropdown-item>
                            <el-dropdown-item command="logout">退出</el-dropdown-item>
                        </el-dropdown-menu>
                    </template>
                </el-dropdown>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { inject } from "vue";
import { Menu, ArrowDown } from "@element-plus/icons-vue";
import { useUserStore } from "@/store/user";
import { useRouter } from "vue-router";
import { ElMessage } from "element-plus";
import { logout } from "@/common";
const isCollapse = inject("isCollapse");
const userStore = useUserStore();

const router = useRouter();
const commandHandle = (command: string) => {
    if (command === "index") {
        router.push("/index");
    } else if (command === "logout") {
        logout(
            () => {
            },
            () => {
                ElMessage.success("退出成功");
            }
        );
    }
};
</script>
<style scoped lang="scss">
.menu_header {
    height: 70px;
    display: flex;
    align-items: center;

    .title {
        color: #fff;

        h2 {
            font-weight: normal;
        }
    }

    :deep(.el-icon) {
        font-size: 20px;
        color: #fff;
        margin-left: 15px;
        margin-top: 10px;
    }

    .right {
        flex: 1;
        display: flex;
        justify-content: flex-end;
        align-items: center;

        :deep(.el-icon--right) {
            margin-left: 0px;
            font-size: 14px;
        }

        :deep(.el-dropdown) {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
    }
}
</style>
